<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact style="display:flex;">
				<a-select v-model="type" class="heade-left-box">
					<a-select-option v-for="it in typeList" :value="it.id" :key="it.id">
						{{ it.name }}
					</a-select-option>
				</a-select>
				<a-input-search
					class="heade-right-box"
					:placeholder="this.$i18n('selectPeople.input',this.$i18n('secret.memberSecret.member_name'))"
					v-model.trim="searchValue"
					@search="getData"
				/>
			</a-input-group>
		</div>
		<scroll-list
			class="content-wrapper"
			panel="RelatePeople"
			command="memberList"
			ref="scrollList"
			:firstLoadSearch="false"
			:showOtherProp="true"
		>
		</scroll-list>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';

export default {
	name: 'RelatePeople',
	components: {
		scrollList
	},
	inject: ['app'],
	data() {
		return {
			type: '0',
			typeList: [
				{ id: '0', name: this.$i18n('selectPeople.relatepeople.all') },
				{ id: '1', name: this.$i18n('relate.type.leader') },
				{ id: '2', name: this.$i18n('relate.type.assistant') },
				{ id: '3', name: this.$i18n('relate.type.junior')},
				{ id: '4', name: this.$i18n('relate.type.confrere') }
			],
			searchValue: ''
		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		}
	},
	watch: {
		type: {
			handler() {
				this.$nextTick(() => {
					this.getData();
				});
			},
			immediate: true
		}
	},
	methods: {
		getData() {
			let { accessFileSecretLevel } = this.orgSelect;
			const data = {
				type: this.type,
				keyword: this.searchValue,
				accessFileSecretLevel
			};
			if (this.type === '0') {
				delete data.type;
			}
			this.$refs.scrollList.search(data);
		}
	}
};
</script>

<style scoped lang="scss">
</style>
